<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background-color: #eee;
        }

        .cart {
            width: 1100px;
            margin: auto;
            background-color: #fff;
            text-align: center;
            line-height: 50px;
        }

        .cart-hd {
            display: flex;
        }

        .cart-hd p {
            flex: 1;
            height: 50px;
            border-bottom: 1px solid #000;
        }

        .cart-bd li {
            display: flex;
        }

        .cart-bd p {
            flex: 1;
            height: 50px;
            border-bottom: 1px solid #000;
        }

        .cart-bd p:nth-child(2),
        .cart-hd p:nth-child(2) {
            flex: 2;
            padding: 0 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .cart-bd img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }

        .num {
            width: 50px;
            vertical-align: middle;
        }

        .add,
        .reduce {
            width: 20px;
            height: 20px;
            text-align: center;
            display: inline-block;
            background-color: orange;
            line-height: 20px;
            vertical-align: middle;
        }

        .disabled {
            background-color: #ddd;
        }

        .empty {
            display: none;
        }
    </style>
</head>

<body>

    <div class="cart">
        <div class="cart-hd">
            <p>
                <input type="checkbox" class="checkAll">全选
            </p>
            <p>商品名称</p>
            <p>图</p>
            <p>单价</p>
            <p>数量</p>
            <p>小计</p>
            <p>操作</p>
        </div>
        <div class="cart-bd">
            <ul>
                <!-- <li>
                    <p>
                        <input type="checkbox" class="checkOne">
                    </p>
                    <p>什么耳机什么耳机什么耳机什么耳机什么耳机什么耳机</p>
                    <p>
                        <img src="" alt="">
                    </p>
                    <p>199</p>
                    <p>
                        <span class="reduce">-</span>
                        <input type="text" class="num">
                        <span class="add">+</span>
                    </p>
                    <p>6</p>
                    <p>X</p>
                </li> -->
            </ul>
        </div>
        <div class="cart-ft">
            <p class="delAll">批量删除</p>
            <p>数量小计：<strong class="total">0</strong></p>
            <p>价格小计: <strong class="money">0</strong></p>
        </div>
    </div>


    <h1 class="empty">购物车空空如也，<a href="">请继续挑选</a></h1>



    <script>


        // 小计封装函数

        // 在单删的时候，反选可能发生改变

        // 在单删和批量删除的时候，oOnes的数量会发生改变，需要重新获取  之后再小计

        // 如果全部删除了   就不显示购物车   显示空空如也

        //接收数据
        var data = {
            msg: '数据请求成功',
            code: 0,
            list: [

                {
                    goods_name: '小米巨能写中性笔10支装 黑色 10支装',
                    goods_img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1559616366.16874615.jpg?thumb=1&w=90&h=90',
                    goods_num: 3,
                    goods_price: 9.99
                },
                {
                    goods_name: '小米巨能写中性笔10支装 黑色 10支装',
                    goods_img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1559616366.16874615.jpg?thumb=1&w=90&h=90',
                    goods_num: 3,
                    goods_price: 9.99
                },
                {
                    goods_name: 'Redmi 手表 2 深空蓝',
                    goods_img: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204211508_976de563d2d261ea20583e0a26bd052a.png?thumb=1&w=90&h=90&f=webp&q=90',
                    goods_num: 2,
                    goods_price: 379
                },
                {
                    goods_name: 'Redmi K50 至尊版 8GB+128GB 雅黑',
                    goods_img: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101508_df890f7fafc29921ded695b2af591190.png?thumb=1&w=90&h=90&f=webp&q=90',
                    goods_num: 1,
                    goods_price: 2799
                },
                {
                    goods_name: '小米手环7 腕带 活力橙',
                    goods_img: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205240049_b5a667f5e7ec7e57154a100001a0bcac.png?thumb=1&w=90&h=90&f=webp&q=90',
                    goods_num: 1,
                    goods_price: 19.9
                },
                {
                    goods_name: '小米巨能写中性笔10支装 黑色 10支装',
                    goods_img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1559616366.16874615.jpg?thumb=1&w=90&h=90',
                    goods_num: 3,
                    goods_price: 9.99
                }
            ]
        };



        // 接收到的是对象   要的是对象中的list


        var oCart = document.querySelector('.cart');
        var oUL = oCart.querySelector('ul');

        // 动态渲染购物车列表
        render();

        var oAll = oCart.querySelector('.checkAll');

        // 必须在渲染列表之后才能获取
        var oOnes = oCart.querySelectorAll('.checkOne');
        // console.log(oOnes);

        var oDels = oCart.querySelectorAll('.del');

        var oDelAll = oCart.querySelector('.delAll');

        var oAdds = oCart.querySelectorAll('.add');

        var oReduces = oCart.querySelectorAll('.reduce');

        var oTotal = oCart.querySelector('.total');

        var oMoney = oCart.querySelector('.money');



        // 全选
        oAll.onclick = function () {
            for (var i = 0; i < oOnes.length; i++) {
                oOnes[i].checked = this.checked;
            }

            total();
        }

        // 反选
        for (var i = 0; i < oOnes.length; i++) {
            oOnes[i].onclick = function () {
                // i 由于异步 已经变成了 length  所以无法使用了
                var flag = true;
                for (var i = 0; i < oOnes.length; i++) {
                    if (!oOnes[i].checked) {
                        flag = false;
                        break;
                    }
                }
                oAll.checked = flag;

                total();
            }
        }


        // 单个删除
        for (var i = 0; i < oDels.length; i++) {
            oDels[i].onclick = function () {
                this.parentElement.remove();
                total();
            }
        }

        // 批量删除
        oDelAll.onclick = function () {
            // 判断是否选中
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    oOnes[i].parentElement.parentElement.remove();
                }
            }

            total();
        }


        // 数量加
        for (var i = 0; i < oAdds.length; i++) {
            oAdds[i].onclick = function () {
                // 数量加
                this.previousElementSibling.value++;
                // 小计
                this.parentElement.nextElementSibling.innerHTML = (this.parentElement.previousElementSibling.innerHTML * this.previousElementSibling.value).toFixed(2);

                // 给减法去掉disabled
                if (this.previousElementSibling.previousElementSibling.classList.contains('disabled')) {
                    this.previousElementSibling.previousElementSibling.classList.remove('disabled');
                }

                total();
            }
        }

        // 数量减
        for (var i = 0; i < oReduces.length; i++) {
            oReduces[i].onclick = function () {
                // if (this.nextElementSibling.value == 1) {
                //     return alert('数量至少为1');
                // }
                if (this.classList.contains('disabled')) {
                    return
                }
                // 数量加
                this.nextElementSibling.value--;
                // 小计
                this.parentElement.nextElementSibling.innerHTML = (this.parentElement.previousElementSibling.innerHTML * this.nextElementSibling.value).toFixed(2);
                // 判断数量为1的时候 添加disabled
                if (this.nextElementSibling.value == 1) {
                    this.classList.add('disabled');
                }
                total();
            }
        }


        // 小计
        function total() {
            // 重新获取oOnes的长度
            oOnes = oCart.querySelectorAll('.checkOne');
            // 数量
            var count = 0;
            // 小计
            var money = 0;
            // 判断是否选中
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    var n = oOnes[i].parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.children[1].value;
                    // console.log(n)
                    count += n * 1;
                    var m = oOnes[i].parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML;
                    money += m * 1;
                }
            }
            console.log(count);
            console.log(money);
            oTotal.innerHTML = count;
            oMoney.innerHTML = money;
        }


        // 动态渲染购物车列表
        function render() {
            var res = '';

            // 拼接
            data.list.forEach(function (v) {
                res += `
                <li>
                    <p>
                        <input type="checkbox" class="checkOne">
                    </p>
                    <p>${v.goods_name}</p>
                    <p><img src="${v.goods_img}"></p>
                    <p>${v.goods_price}</p>
                    <p>
                        <span class="reduce ${v.goods_num > 1 ? '' : 'disabled'}">-</span>
                        <input type="text" class="num" value="${v.goods_num}">
                        <span class="add">+</span>
                    </p>
                    <p>${v.goods_num * v.goods_price}</p>
                    <p class="del">X</p>
                </li>
            `
            })
            oUL.innerHTML = res;
        }






    </script>